<template>
  <div class="">
    <el-button-group>
      <!-- 不分割 -->
      <el-button
        type="small"
        @click="
          typechange('不分割');
        "
        >不分割</el-button
      >
      <!-- 国标分幅 -->
      <el-popover
        placement="bottom"
        trigger="hover"
        width=""
        content="this is content, this is content, this is content"
      >
        <div style="" class="fc">
          <n-radio-group
            v-model:value="guobiaoval"
            name="radiobuttongroup1"
            style="width: 130px"
          >
            <n-radio
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in guobiaoradiooption"
            />
          </n-radio-group>
          <el-button
            type="small"
            size="small"
            @click="
              typechange('国标');
              fenfuguobiao1();
            "
            >确定</el-button
          >
        </div>
        <template #reference>
          <el-button type="small" @click="1">国标</el-button>
        </template>
      </el-popover>

      <!-- 军标分幅 -->
      <el-popover
        placement="bottom"
        trigger="hover"
        width=""
        content="this is content, this is content, this is content"
      >
        <div style="" class="fc">
          <n-radio-group
            v-model:value="junbiaoval"
            name="radiobuttongroup1"
            style="width: 130px"
          >
            <n-radio
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in junbiaoradiooption"
            />
          </n-radio-group>
          <!-- <el-button type="small" @click="typechange('军标');fenfuguobiao1()">军标</el-button> -->
          <el-button
            type="small"
            size="small"
            @click="
              typechange('军标');
              fenfuguobiao1();
            "
            >确定</el-button
          >
        </div>
        <template #reference>
          <el-button type="small" @click="1">军标</el-button>
        </template>
      </el-popover>
      <!-- 矢量导入 -->

      <el-popover
        placement="bottom"
        trigger="hover"
        width=""
        content="this is content, this is content, this is content"
      >
        <div style="" class="fc">
          <el-upload
            class=""
            action="#"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="uploadShiLiangFile"
          >
            <el-button type="" plain size="" @click="typechange('矢量导入')">
              选择文件
            </el-button>
          </el-upload>
        </div>
        <template #reference>
          <el-button type="small" @click="typechange('矢量导入')">矢量导入</el-button>
        </template>
      </el-popover>

      <!-- 图幅号导入 -->

      <el-popover
        placement="left"
        trigger=""
        :visible="daorutufuparams.showtufuhao"
        ref="popoverRef"
        width="325"
      >
        <div style="" class="fc">
          <!-- 选择文件 -->
          <!-- 图幅号输入框 -->
          <!-- 比例尺 -->
          <!-- 分幅方式 -->

          <el-descriptions class="margin-top" title="" :column="1" border>
            <el-descriptions-item :label-class-name="'dsl'">
              <template #label>
                <div class="cell-item" style="">文件导入</div>
              </template>
              <el-upload
                class=""
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="uploadTuFuFile"
              >
                <el-button type="" plain size=""> 选择文件 </el-button>
              </el-upload>
            </el-descriptions-item>
            <el-descriptions-item :label-class-name="'dsl'">
              <template #label>
                <div class="cell-item" style="">图幅号</div>
              </template>
              <el-input
                v-model="daorutufuparams.tufutext"
                type="textarea"
                placeholder=""
                size="normal"
                :rows="4"
                clearable
              ></el-input>
            </el-descriptions-item>
            <el-descriptions-item :label-class-name="'dsl'">
              <template #label>
                <div class="cell-item" style="">分幅方式</div>
              </template>
              <n-radio-group
                v-model:value="daorutufuparams.fenfufangshi"
                name="radiobuttongroup1"
                style=""
              >
                <n-radio :key="'guobiao'" :label="'国标'" :value="'guobiao'" />
                <n-radio :key="'junbiao'" :label="'军标'" :value="'junbiao'" />
              </n-radio-group>
            </el-descriptions-item>
            <el-descriptions-item :label-class-name="'dsl'">
              <template #label>
                <div class="cell-item" style="">比例尺</div>
              </template>

              <el-select
                v-model="daorutufuparams.bilichival"
                placeholder="请选择"
                @click.stop
                size="large"
                style=""
              >
                <el-option
                  v-for="item in guobiaoradiooption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-if="daorutufuparams.fenfufangshi == 'guobiao'"
                />
                <el-option
                  v-for="item in junbiaoradiooption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  v-if="daorutufuparams.fenfufangshi == 'junbiao'"
                />
              </el-select>
            </el-descriptions-item>
          </el-descriptions>
          <br />
          <div class="fr" style="width: 100%">
            <el-button
              type="small"
              style="width: 50%"
              size="small"
              @click="daorutufuparams.showtufuhao = false"
              >取消</el-button
            >
            <el-button type="small" style="width: 50%" size="small" @click="tufuhao()"
              >确定</el-button
            >
          </div>
        </div>
        <template #reference>
          <el-button
            type="small"
            @click="daorutufuparams.showtufuhao = !daorutufuparams.showtufuhao"
            v-click-outside="onClickOutside"
            >图幅号导入</el-button
          >
        </template>
      </el-popover>
      <!-- 指定大小裁切 -->

      <el-popover
        placement="left"
        trigger="hover"
        width=""
        content="this is content, this is content, this is content"
      >
        <div style="" class="fc">
          <el-descriptions class="margin-top" title="" :column="1" border>
            <el-descriptions-item :label-class-name="''">
              <template #label>
                <div class="cell-item" style="">网格间距（米）</div>
              </template>
              <el-input
                v-model="daorutufuparams.zhidingdaxiaoval"
                placeholder=""
                size="normal"
                clearable
              ></el-input>
            </el-descriptions-item>
          </el-descriptions>
          <br />
          <el-button type="small" size="small" @click="fenfuzhidingdaxiao()"
            >确定</el-button
          >
        </div>
        <template #reference>
          <el-button type="small" @click="typechange('指定大小裁切')"
            >指定大小裁切</el-button
          >
        </template>
      </el-popover>
    </el-button-group>
    <br />

    <div class="fr">
      当前选择：
      <div class="fenfufangshiyixuanzediv">
        {{ props.fenfaparams.fenggefangshi }}
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  defineProps,
  onMounted,
  defineEmits,
  ref,
  onUnmounted,
  defineExpose,
  unref,
} from "vue";
import * as turf from "@turf/turf";
import { makeStandardMapGrids } from "./useFenFu.js";
import { apiList } from "@/api/apiList";

import useTuFu from "./mixins/useTuFu.js";

import { ClickOutside as vClickOutside } from "element-plus";

const onClickOutside = () => {
  // daorutufuparams.showtufuhao = !daorutufuparams.showtufuhao
};

let props = defineProps({
  fenfaparams: Object,
});

let { uploadTuFuFile, uploadShiLiangFile, daorutufuparams, tufuhao, fenfuzhidingdaxiao } = useTuFu(props);

const buttonRef = ref();

// emit("update:paramsitem", props.fenfaparams);

var bbox = [-95, 30, -85, 40];
var cellSide = 50;
var options = { units: "kilometers" };

var squareGrid = turf.squareGrid(bbox, cellSide, options);

let fengefangshitype = ref("不分割");
let fengeitemmsg = ref("");

let guobiaoradiooption = ref([
  { label: "1:500", value: "0", display: { min: 0, max: 3000 } },
  { label: "1:1000", value: "1", display: { min: 0, max: 7000 } },
  { label: "1:2000", value: "2", display: { min: 0, max: 15000 } },
  { label: "1:5000", value: "3", display: { min: 0, max: 30000 } },
  { label: "1:10000", value: "4", display: { min: 0, max: 60000 } },
  { label: "1:25000", value: "5", display: { min: 0, max: 150000 } },
  { label: "1:50000", value: "6", display: { min: 0, max: 200000 } },
  { label: "1:100000", value: "7", display: { min: 0, max: 400000 } },
  { label: "1:250000", value: "8", display: { min: 0, max: 1200000 } },
  { label: "1:500000", value: "9", display: { min: 0, max: 2000000 } },
  { label: "1:1000000", value: "10", display: { min: 0, max: 3200000 } },
]);

let junbiaoradiooption = ref([
  { label: "1:10000", value: "0", display: { min: 0, max: 60000 } },
  { label: "1:25000", value: "1", display: { min: 0, max: 150000 } },
  { label: "1:50000", value: "2", display: { min: 0, max: 200000 } },
  { label: "1:100000", value: "3", display: { min: 0, max: 400000 } },
  { label: "1:250000", value: "4", display: { min: 0, max: 1200000 } },
  { label: "1:500000", value: "5", display: { min: 0, max: 2000000 } },
  { label: "1:1000000", value: "6", display: { min: 0, max: 3200000 } },
]);

function typechange(type) {
  props.fenfaparams.fenggefangshi = type;
  viewer.entities.removeAll()
  fengefangshitype.value = type
}

onUnmounted(() => {
  viewer.entities.removeAll()
})

let guobiaoval = ref("0");
let junbiaoval = ref("0");

// 军标分幅 接口方式
function fenfuguobiao1() {
  let params = {
    geojson: "",
    type: "",
    scale: guobiaoval.value,
  };

  let tmpjson = {
    type: "FeatureCollection",
    features: [],
  };

  if (props.fenfaparams.quyufanweival.length == 0) {
    ElMessage.success("输入范围不能为空");
    return;
  }

  props.fenfaparams.quyufanweival.map((item) => {
    tmpjson.features.push(...item.features);
  });

  params.geojson = JSON.stringify(tmpjson);
  let fenfuitem = {};
  if (fengefangshitype.value == "国标") {
    params.type = "guobiao";
    params.scale = guobiaoval.value;
    fenfuitem = guobiaoradiooption.value.filter((item) => {
      return item.value == guobiaoval.value;
    })[0];
  } else {
    params.type = "junbiao";
    params.scale = junbiaoval.value;
    fenfuitem = junbiaoradiooption.value.filter((item) => {
      return item.value == junbiaoval.value;
    })[0];
  }

  apiList.getFramingMeans(params).then((res) => {
    // 获取数据
    // 赋值
    // 渲染样式
    // 地图回显
    res.data.features.map((item) => {
      viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(
          (item.geometry.coordinates[0][0][0][0] +
            item.geometry.coordinates[0][0][2][0]) /
            2,
          (item.geometry.coordinates[0][0][0][1] +
            item.geometry.coordinates[0][0][1][1]) /
            2
        ),

        label: {
          text: item.properties.SheetName,
          // text: item.properties.ID + "\n" + item.properties.fanwei.split(" ").join("\n"),
          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
            fenfuitem.display.min,
            fenfuitem.display.max
          ),
        },
        polyline: {
          // positions: new Cesium.CallbackProperty(function () {
          //   return Cesium.Cartesian3.fromDegreesArray(
          //     item.geometry.coordinates[0][0].flat()
          //   );
          // }, false),
          positions: Cesium.Cartesian3.fromDegreesArray(item.geometry.coordinates[0][0].flat()),
          // hierarchy: Cesium.Cartesian3.fromDegreesArray(item.geometry.coordinates[0].flat()),
          width: 3,
          material: Cesium.Color.YELLOW.withAlpha(0.5),
        },
      });
    });

    // 赋值
    let basejson = {
      type: "FeatureCollection",
      features: [],
    };

    basejson.features.push(...res.data.features);

    props.fenfaparams.fenggefangshival = JSON.stringify(basejson);
  });
}
</script>
<style lang="scss">
.dsl {
  width: 90px;
}
.fenfufangshiyixuanzediv {
  border-radius: 10px;
  background-color: #0ff2;
  padding: 0px 15px;
}
</style>
